<template>
    <div>
        <el-card class="box-card" :body-style="{ padding: '10px' }">
            <div class="pagination-wrapper">
                <el-form :inline="true" :model="keyword" ref="searchForm" class="demo-form-inline">
                    <el-form-item label="车位号:">
                        <el-input v-model="keyword.vehicle" placeholder="请输入车位号"></el-input>
                    </el-form-item>
                    <el-form-item label="请选择使用情况" v-model="keyword" :label-width="formLabelWidth">
                        <el-select v-model="keyword.useStatus" placeholder="请选择">
                            <el-option v-for="item in DistinctUseStatusList" :key="item.useStatus"
                                :label="item.useStatus" :value="item.useStatus">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="search" icon="el-icon-search">查询</el-button>
                        <el-button type="primary" plain size="small" @click="resetSearchForm('searchForm')"
                            icon="el-icon-refresh">
                            重置
                        </el-button>
                        <el-button type="primary" plain size="small" @click="downloadExcel"
                            icon="el-icon-download">导出</el-button>

                    </el-form-item>
                </el-form>
            </div>
            <span><el-button type="primary" @click="AddInfo" icon="el-icon-circle-plus-outline">添加</el-button></span>
        </el-card>
        <!-- 列表 -->
        <el-card class="box-card" :body-style="{ padding: '10px' }">
            <el-table :data="bazzerList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="编号" align="center" prop="id" />
                <el-table-column label="车位号" align="center" prop="parkingSpaceNumber" />
                <el-table-column label="车牌号" align="center" prop="licensePlateNumber" />
                <el-table-column label="使用人员" align="center" prop="ownerName" />
                <el-table-column label="联系方式" align="center" prop="contactNumber" />
                <el-table-column label="住址" align="center" prop="buildingNumber" />
                <el-table-column label="使用情况" align="center" prop="useStatus">
                    <template slot-scope="scope">
                        <el-tag :type="getTagType(scope.row.useStatus)" effect="dark">
                            <span>{{ scope.row.useStatus }}</span>
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="购买/出租日期" align="center" prop="rentStartDate" />
                <el-table-column label="车位到期时间" align="center" prop="rentEndDate" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑
                        </el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">停用
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>


        <!-- 编辑的对话框1 -->
        <el-dialog title="车位转租" :visible.sync="dialogUpdateVisible">
            <el-form :model="ParkingSystemFrom">
                <el-form-item label="请选择业主" v-model="ParkingSystemFrom.ownerId" :label-width="formLabelWidth">
                    <el-select v-model="editableValue" placeholder="请选择">
                        <el-option v-for="item in OwnerByIdNameList" :key="item.ownerId" :label="item.ownerName"
                            :value="item.ownerId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="业主手机号码" :label-width="formLabelWidth">
                    <el-select v-model="ParkingSystemFrom.contactNumber" placeholder="只读选择器" disabled>
                        <el-option v-for="item in OwnerByIdNameList" :key="item.ownerId" :label="item.contactNumber"
                            :value="item.ownerId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="请选择住址" v-model="ParkingSystemFrom.buildingNumber" :label-width="formLabelWidth">
                    <el-select v-model="ParkingSystemFrom.buildingNumber" placeholder="请选择">
                        <el-option v-for="item in DistinctBuildingNumberList" :key="item.buildingNumber"
                            :label="item.buildingNumber" :value="item.buildingNumber">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="请选择使用情况" v-model="ParkingSystemFrom.useStatus" :label-width="formLabelWidth">
                    <el-select v-model="ParkingSystemFrom.useStatus" placeholder="请选择">
                        <el-option v-for="item in DistinctUseStatusList" :key="item.useStatus" :label="item.useStatus"
                            :value="item.useStatus">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogUpdateVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateInfo()">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 增加的对话框1 -->
        <el-dialog title="添加车位转租信息" :visible.sync="dialogAddVisible">
            <el-form :model="ParkingSystemAddFrom">
                <el-form-item label="车位号" v-model="ParkingSystemAddFrom.parkingSpaceNumber"
                    :label-width="formLabelWidth">
                    <el-input v-model="ParkingSystemAddFrom.parkingSpaceNumber" placeholder="请输入车位号"></el-input>
                </el-form-item>
                <el-form-item label="车位日期管理" v-model="ParkingSystemAddFrom.parkingSpaceTime"
                    :label-width="formLabelWidth">
                    <el-date-picker value-format="yyyy-MM-dd" v-model="ParkingSystemAddFrom.parkingSpaceTime"
                        type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="请选择业主" v-model="ParkingSystemAddFrom.ownerId" :label-width="formLabelWidth">
                    <el-select v-model="editableValue" placeholder="请选择">
                        <el-option v-for="item in OwnerByIdNameList" :key="item.ownerId" :label="item.ownerName"
                            :value="item.ownerId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="业主手机号码" :label-width="formLabelWidth">
                    <el-select v-model="ParkingSystemAddFrom.contactNumber" placeholder="只读选择器" disabled>
                        <el-option v-for="item in OwnerByIdNameList" :key="item.ownerId" :label="item.contactNumber"
                            :value="item.ownerId">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="车牌号" :label-width="formLabelWidth">
                    <el-select v-model="ParkingSystemAddFrom.licensePlateNumber" placeholder="只读选择器" disabled>
                        <el-option v-for="item in OwnerByIdNameList" :key="item.ownerId"
                            :label="item.licensePlateNumber" :value="item.ownerId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="请选择住址" v-model="ParkingSystemAddFrom.buildingNumber" :label-width="formLabelWidth">
                    <el-select v-model="ParkingSystemAddFrom.buildingNumber" placeholder="请选择">
                        <el-option v-for="item in DistinctBuildingNumberList" :key="item.buildingNumber"
                            :label="item.buildingNumber" :value="item.buildingNumber">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="请选择使用情况" v-model="ParkingSystemFrom.useStatus" :label-width="formLabelWidth">
                    <el-select v-model="ParkingSystemAddFrom.useStatus" placeholder="请选择">
                        <el-option v-for="item in DistinctUseStatusList" :key="item.useStatus" :label="item.useStatus"
                            :value="item.useStatus">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取 消</el-button>
                <el-button type="primary" @click="ParkingSystemAdd()">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 分页 -->
        <el-card class="box-card" :body-style="{ padding: '10px' }">
            <div class="pagination-wrapper">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :page-sizes="[5, 15, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper"
                    :total=total>
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import { ParkingSystemAll, OwnerByIdName, ParkingSpaceInfoById, UpdateParkingSystemlById, DeleteParkingSystemlById, DistinctBuildingNumber, DistinctUseStatus, exportUnit, insertParkingSystem } from "@/api/psm/ParkingSystem"

export default {
    data() {
        return {
            value1: '',
            //分页参数
            currentPage: 1,
            total: 0,
            pageSize: 5,
            pageNum: 1,
            //列表数据
            bazzerList: [],
            //多选框
            measureCodes: [],
            ids: [],
            keyword: {
                vehicle: null,
                useStatus: null,
            },

            editableValue: '',
            //业主列表
            OwnerByIdNameList: [],
            //住址列表
            DistinctBuildingNumberList: [],
            //活动状态列表
            sysHdtypeList: [],
            //使用情况列表
            DistinctUseStatusList: [],
            //添加/修改弹框
            dialogFormVisible: false,
            //批量修改转化客户弹框
            dialogUpdateVisible: false,
            //添加弹框
            dialogAddVisible: false,
            //弹框标题
            title: '',
            //添加弹框表单
            ParkingSystemFrom: {
                parkingSpaceId: '',
                ownerId: '',
                contactNumber: '',
                useStatus: '',
                buildingNumber: '',
            },
            ParkingSystemAddFrom: {
                parkingSpaceNumber: "",
                licensePlateNumber: "",
                parkingSpaceTime: "",
                ownerId: '',
                contactNumber: '',
                buildingNumber: '',
                useStatus: "",
            },
            formLabelWidth: "140px",
            //市场活动列表
            eventsList: [],
            isShowPrimary: false,
            //批量修改转化客户
            batchUpdate: {
                sysZhkehu: '',
            }

        }

    },
    watch: {
        editableValue(newValue) {
            //console.log("传达", newValue);
            this.ParkingSystemAddFrom.contactNumber = newValue;
            this.ParkingSystemAddFrom.licensePlateNumber = newValue;
            this.ParkingSystemFrom.contactNumber = newValue;
        }
    },
    methods: {
        //获取展示数据
        fetchData() {
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                vehicle: this.keyword.vehicle,
                useStatus: this.keyword.useStatus,
            }
            console.log(params)
            ParkingSystemAll(params).then(res => {
                this.total = res.data.total
                console.log(res)
                this.bazzerList = res.data.list
            })
        },

        // 模糊搜索
        search() {
            this.fetchData()
        },
        // 标签类型
        getTagType(status) {
            switch (status) {
                case "可购买":
                    return 'primary'; // 假设 0 表示未处理
                case "可租用":
                    return 'success';    // 假设 1 表示已连续
                case "已租用":
                    return 'info';  // 假设 2 表示已关闭
            }
        },
        // 多选框选中数据
        handleSelectionChange(selectionRowArr) {
            this.ids = [];
            console.log(selectionRowArr)
            for (let i = 0; i < selectionRowArr.length; i++) {
                this.ids.push(selectionRowArr[i].id)
            }
            // console.log("ids", this.ids)
        },
        AddInfo() {
            this.replacementForm()
            DistinctBuildingNumber().then(res => {
                if (res.code == 200) {
                    this.DistinctBuildingNumberList = res.data
                    //console.log(this.DistinctBuildingNumberList,"获取住址信息成功")
                    OwnerByIdName().then(res => {
                        if (res.code == 200) {
                            this.OwnerByIdNameList = res.data
                            this.dialogAddVisible = true
                            //console.log(this.OwnerByIdNameList,"获取业主信息成功")
                        } else {
                            this.$message.error('获取业主信息失败')
                        }
                    })
                } else {
                    this.$message.error('获取住址信息失败')
                }
            })

        },
        handleDelete(row) {
            console.log(row.id)
            // console.log(index, row);
            this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    DeleteParkingSystemlById(row.id).then((response) => {
                        console.log(response);
                        if (response.code == 200) {
                            if (response.data == 1) {
                                this.$message.success('删除成功')
                                this.fetchData()
                            }
                        } else {
                            this.$message({
                                type: "error",
                                message: response.msg,
                            });
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        downloadExcel() {
            this.$confirm('确定要导出数据吗?', '信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                // 方案1: 原生js方式发起导出excel请求,后端设置响应格式
                window.location.href = "http://localhost:8081/parkingManagement/ParkingSystem/export"
                // 方案1的话后端需要设置响应格式和内容
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消导出数据！'
                })
            })
        },
        //打开修改弹窗
        handleUpdate(row) {
            this.ParkingSystemFrom.parkingSpaceId = row.id
            DistinctBuildingNumber().then(res => {
                if (res.code == 200) {
                    this.DistinctBuildingNumberList = res.data
                    //console.log(this.DistinctBuildingNumberList,"获取住址信息成功")
                    ParkingSpaceInfoById(row.id).then(res => {
                        if (res.code == 200) {
                            //console.log(res,"获取车位信息成功")
                            this.ParkingSystemFrom = res.data[0]
                            this.editableValue = res.data[0].ownerId
                            OwnerByIdName().then(res => {
                                if (res.code == 200) {
                                    this.OwnerByIdNameList = res.data
                                    this.dialogUpdateVisible = true
                                    // console.log(this.OwnerByIdNameList,"获取业主信息成功")
                                } else {
                                    this.$message.error('获取业主信息失败')
                                }
                            })
                        } else {
                            this.$message.error('获取车位信息失败')
                        }
                    })
                } else {
                    this.$message.error('获取住址信息失败')
                }
            })

        },
        getInfo() {
            DistinctUseStatus().then(res => {
                if (res.code == 200) {
                    this.DistinctUseStatusList = res.data
                    // console.log(this.DistinctUseStatusList,"获取使用情况信息成功")

                } else {
                    this.$message.error('获取使用情况信息失败')
                }
            })
        },
        updateInfo() {
            // console.log(this.editableValue,"当前数据信息")

            this.ParkingSystemFrom.ownerName = this.editableValue
            console.log(this.ParkingSystemFrom, "当前数据信息")
            UpdateParkingSystemlById(this.ParkingSystemFrom.parkingSpaceId, this.ParkingSystemFrom.ownerName, this.ParkingSystemFrom.useStatus, this.ParkingSystemFrom.buildingNumber).then(res => {
                if (res.code == 200) {
                    if (res.data == 1) {
                        this.$message.success('编辑成功')
                        this.fetchData()
                    }
                } else {
                    this.$message.error('获取车位信息失败')
                }
            })
            this.dialogUpdateVisible = false
        },
        // 重置表单
        resetSearchForm(formName) {
            this.$refs[formName].resetFields();
            this.ParkingSystemFrom = {}
            this.HistoricalRentalFrom = {}
            this.keyword = {}
            this.fetchData()
        },
        replacementForm() {
            this.editableValue = ''
            this.ParkingSystemFrom = {}
            this.HistoricalRentalFrom = {}
        },
        //提交编辑/添加
        ParkingSystemAdd() {
            // 车位日期不可为空
            if (this.ParkingSystemAddFrom.parkingSpaceTime == null || this.ParkingSystemAddFrom.parkingSpaceTime == "") {
                this.$message.error('请选择车位日期')
                return
            }
            // 车位号不可为空
            if (this.ParkingSystemAddFrom.parkingSpaceNumber == null || this.ParkingSystemAddFrom.parkingSpaceNumber == "") {
                this.$message.error('请输入车位号')
                return
            }
            // 住址不可为空
            if (this.ParkingSystemAddFrom.buildingNumber == null || this.ParkingSystemAddFrom.buildingNumber == "") {
                this.$message.error('请选择住址')
                return
            }
            this.ParkingSystemAddFrom.ownerId = this.editableValue
            console.log(this.ParkingSystemAddFrom, "添加数据信息")
            insertParkingSystem(this.ParkingSystemAddFrom).then(res => {
                if (res.code == 200) {
                    if (res.data == 1) {
                        this.$message.success('添加成功')
                        this.fetchData()
                    }
                } else {
                    this.$message.error('获取车位信息失败')
                }
            })
            this.dialogAddVisible = false
        },
        // 页面大小改变时触发
        handleSizeChange(val) {
            this.pageSize = val;
            this.fetchData()
        },
        // 当前页码改变时触发
        handleCurrentChange(val) {
            this.pageNum = val;
            this.fetchData()
        },
        exportUnits() {
            exportUnit().then(res => {
                console.log(res)
            })
        }
    },
    created() {
        this.fetchData()
        this.getInfo()
    },

}
</script>

<style>
.box-card {
    width: 100%;
    margin-top: 10px;
}

.pagination-wrapper {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中，若需要的话 */
    margin-top: 10px;
    /* Optional: 可以添加 margin 增加间距 */
}
</style>